import React from 'react'
import { Outlet, useNavigate } from 'react-router-dom'

export default function () {
  // 生成一个路由跳转的函数
  const navigate = useNavigate()

  return (
    <div>
      <h2>Home</h2>
      {/* 编程式路由导航 */}
      <button onClick={() => navigate('/home/news', {replace: true})}>News</button>
      <button onClick={() => navigate('/home/message/3?title=abc', {state: {content: 'abcdef'}})}>Message</button>
      <hr/>
      {/* 在此显示匹配的子路由组件 */}
      <Outlet/>
    </div>
  )
}
/* 
路由跳转传参:
1. params    带占位的
2. query/search  问号后面的
3. state

*/
